<template>
	<div class="welcome-page">
		<div class="block">
			<el-image :src="src" :fit="fits"></el-image>
			<div class="right">
				<div class="r-top">
					<h1>Welcome To Our Page</h1>
					<h3>Vestibulum Interdum Mi Sit Amet</h3>
					<p>Lorem ipsum dolor sit t, consectetuer adipiscing elit. Praesentstibulum molestie lacus. Aenean
						nonumy hendrerit mauris. Phasellus porta. Fusce cipit varius mi. Cum sociis natoque penatibus et
						dis parturient montes, nasus. Nulla dui. Fusce feugiat malesuada odio.</p>
					<el-button type="danger">了解更多</el-button>
				</div>
				<div class="r-bottom">
					<div v-for="item in srcList" :key="item">
						<el-image :src="item" :fit="fits"></el-image>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fits: 'cover',
				src: 'http://demo.kangjingept.com/cssthemes6/11.15ZF19/images/p1.jpg',
				srcList: [
					'http://demo.kangjingept.com/cssthemes6/11.15ZF19/images/w1.jpg',
					'http://demo.kangjingept.com/cssthemes6/11.15ZF19/images/w2.jpg',
					'http://demo.kangjingept.com/cssthemes6/11.15ZF19/images/w3.jpg'
				]
			}
		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.welcome-page {
		width: 70%;
		height: 500px;
		margin: 30px auto;
		background: #222222;

		.block {
			height: 500px;
			display: flex;

			.el-image {
				width: 50%;
			}

			.right {
				width: 50%;
				padding: 1%;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.r-top {
					height: 60%;
					position: relative;

					h1 {
						font-size: 48px;
						font-weight: normal;
						color: #fff;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					h3 {
						margin-top: 4%;
						font-weight: normal;
						color: #fff;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					p {
						margin-top: 4%;
						color: #999;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4;
						overflow: hidden;
					}

					.el-button {
						position: absolute;
						bottom: 5%;
					}
				}

				.r-bottom {
					
					height: 40%;
					display: flex;
					justify-content: space-around;
					div {
						width: 30%;
						.el-image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
